<template>
	<view class="loginPage flex" @touchmove.stop="app.util.hideKeyboard()" :style="{ '--fss': app.theme.fss() }">
		<common-header title="" background="rgba(0,0,0,)" />
		<view class="loginHead">
			<view class="h3">手机号修改 {{ info.step }}/2</view>
			<view class="desc">{{ info.step === 1 ? '我们即将会向您原手机号发送验证码' : '完成新手机验证后，将修改您绑定的手机号' }}</view>
		</view>
		<view class="loginView">
			<template v-if="info.step === 1">
				<view class="phoneView flex">
					<text class="iconfont icon-shouji1"></text>
					<input type="number" disabled v-model="info.old.old_mobile" maxlength="11" placeholder="请输入原手机号" class="input" placeholder-style="color:rgba(255,255,255,0.6);font-weight: normal;" :adjust-position="false" />
					<text v-if="info.old.countDown" class="code disabled">{{ info.old.countDown }}s后可发送</text>
					<text v-else class="code" :class="info.old.old_mobile !== 11 ? 'disabled' : ''" @tap="handleCodeSend">发送验证码</text>
				</view>
				<view class="phoneView flex">
					<text class="iconfont icon-yanzhengma" style="font-size:calc(38rpx * var(--fss));"></text>
					<input type="number" v-model="info.old.old_code" maxlength="6" placeholder="6位数的验证码" class="input" placeholder-style="color:rgba(255,255,255,0.6);font-weight: normal;" :adjust-position="false" />
				</view>
			</template>
			<template v-else>
				<view class="phoneView flex">
					<text class="iconfont icon-shouji1"></text>
					<input type="number" v-model="info.new.new_mobile" maxlength="11" placeholder="请输入新手机号" class="input" placeholder-style="color:rgba(255,255,255,0.6);font-weight: normal;" :adjust-position="false" />
					<text v-if="info.new.countDown" class="code disabled">{{ info.new.countDown }}s后可发送</text>
					<text v-else class="code" :class="info.new.new_mobile !== 11 ? 'disabled' : ''" @tap="handleCodeSend">发送验证码</text>
				</view>
				<view class="phoneView flex">
					<text class="iconfont icon-yanzhengma" style="font-size:calc(38rpx * var(--fss));"></text>
					<input type="number" v-model="info.new.new_code" maxlength="6" placeholder="6位数的验证码" class="input" placeholder-style="color:rgba(255,255,255,0.6);font-weight: normal;" :adjust-position="false" />
				</view>
			</template>
			<view class="loginBtn" @tap="nextChange">{{ info.step === 1 ? '下一步' : '完成修改' }}</view>
		</view>
	</view>
	<common-toast ref="commonToastRef" />
</template>

<script setup>
	import { ref, inject, onMounted } from "vue";
	import { onUnload } from "@dcloudio/uni-app";
	const app = inject('app');
	
	/* 变量区域 */
	// 基本信息
	const info = ref({
		step: 1,
		old: {
			old_mobile: "",
			old_code: "",
			countDown: 0,
			countDownTimer: null,
		},
		new: {
			new_mobile: "",
			new_code: "",
			countDown: 0,
			countDownTimer: null,
		}
	});
	
	// 通用toast
	const commonToastRef = ref();
	
	
	/* 方法区域 */
	// 验证码发送
	function handleCodeSend() {
		let mobile = info.value.step === 1 ? info.value.old.old_mobile : info.value.new.new_mobile;
		if (mobile.length !== 11) {
			commonToastRef.value.open({ type: "warning", text: "手机号有误" });
			return;
		}
		
		commonToastRef.value.open({ type: "loading", text: "正在发送.." });
		app.request.ajax({
			url: "/api/basis/sms_action",
			method: "POST",
			data: { mobile: mobile },
			success() {
				if(info.value.step === 1){
					info.value.old.countDown = 60;
					info.value.old.countDownTimer = setInterval(() => {
						info.value.old.countDown--;
						if (info.value.old.countDown === 0) {
							clearInterval(info.value.old.countDownTimer);
						}
					}, 1000);
				}else{
					info.value.new.countDown = 60;
					info.value.new.countDownTimer = setInterval(() => {
						info.value.new.countDown--;
						if (info.value.new.countDown === 0) {
							clearInterval(info.value.new.countDownTimer);
						}
					}, 1000);
				}
			},
			done() {
				commonToastRef.value.close();
			}
		});
	}

	// 下一步
	function nextChange(){
		if(info.value.step === 1){
			if (info.value.old.old_mobile.length !== 11) {
				commonToastRef.value.open({ type: "warning", text: "原手机号有误" });
				return;
			}
			if (info.value.old.old_code.length !== 6) {
				commonToastRef.value.open({ type: "warning", text: "原验证码有误" });
				return;
			}
			info.value.step = 2;
		}else{
			if (info.value.new.new_mobile.length !== 11) {
				commonToastRef.value.open({ type: "warning", text: "新手机号有误" });
				return;
			}
			if (info.value.new.new_code.length !== 6) {
				commonToastRef.value.open({ type: "warning", text: "新验证码有误" });
				return;
			}
			
			commonToastRef.value.open({ type: "loading", text: "修改中.." });
			app.request.ajax({
				url: "/api/user/editMobile",
				method: "POST",
				data: {
					old_mobile: info.value.old.old_mobile,
					old_code: info.value.old.old_code,
					new_mobile: info.value.new.new_mobile,
					new_code: info.value.new.new_code,
				},
				success(res) {
					commonToastRef.value.close();
					app.util.loginSuccess(res.data.info);
					
					setTimeout(() => {
						app.util.goBack();
					},300);
				},
				error(err){
					commonToastRef.value.close();
					commonToastRef.value.open({ type: "error", text: "新验证码有误" });
				}
			});
		}
	}
	
	
	// 当页面加载完成后
	onMounted(() => {
		if(app.util.isLogin()){
			app.request.ajax({
				url: "/api/user/setting",
				success(res){
					info.value.old.old_mobile = res.data.user.mobile;
				},
			});
		}else{
			app.util.alert({
				content: "请先登录账号",
				success(){
					app.util.goBack();
				}
			});
		}
	});
	
	// 当页面生命周期结束的时候
	onUnload(() => {
		clearInterval(info.value.new.countDownTimer);
		clearInterval(info.value.old.countDownTimer);
	});
</script>

<style lang="scss" scoped>
	.loginPage{
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		flex-direction: column;
		background: url("/static/img/loginBackground.png")no-repeat center top;
		background-size: contain;
		background-color: #11121b;
	}
</style>